import BaseNode from './BaseNode'
import { h } from '@logicflow/core'

/**
 * @description: 注册节点
 * @param {*} item
 *  type: "myTest",
    text: "start 123",
    content: "这个节点是start",
    bgColor: "#a6bbcf", // "rgb(166, 187, 207)",
    icon: startIcon,
    anchorsOffset: ["left", "right"],
 *
 * @return {*}
 */
let nodeFactory = (item) => {
  class MyNode extends BaseNode.view {
    // getIcon() {
    //   const { width, height } = this.props.model;
    //   return h("image", {
    //     width: height * 0.8,
    //     height: height * 0.8,
    //     x: -width / 2 + height / 10,
    //     y: -height / 2 + height / 10,
    //     href: item.icon,
    //   });
    // }
  }

  class MyNodeModel extends BaseNode.model {
    constructor(data, graphModel) {
      super(data, graphModel)
      this.icon = item.icon
      // this.content = this.properties.content;
    }
    getNodeStyle() {
      const style = super.getNodeStyle()
      style.bgColor = item.bgColor || '#fff'
      return style
    }

    initNodeData(data) {
      super.initNodeData(data)
      // 设置连接锚点

      const { width, height } = this
      let anchorsOffsetObj = {
        top: [0, -height / 2],
        right: [width / 2, 0],
        bottom: [0, height / 2],
        left: [-width / 2, 0],
      }
      const anchorsOffset = item.anchorsOffset || ['left', 'right']
      let arr = anchorsOffset.map((i) => anchorsOffsetObj[i])
      this.anchorsOffset = arr
    }
  }

  return {
    type: item.type,
    text: item.text,
    model: MyNodeModel,
    view: MyNode,
  }
}
let colorArr = ['#a6bbcf', '#e7e7ae', '#fdd0a2', '#e6e0f8']
export default function register(lf, fetchNodes) {
  fetchNodes.forEach((i) => {
    // console.log("fetchNodes 注册节点配置项", { ...i });
    lf.register(nodeFactory(i))
  })
}
